<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED数字</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/led.css">
    <style>
        body {
            background-color: #000;
        }
        .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            transform: translateY(-90px);
        }
    </style>
</head>
<body>
    <div id="app">
        <template v-for="(i,index) in time">
            <my-led :value="i"></my-led>
            <span class="circle" v-if="index==1 || index == 3"></span>
        </template>
        <br>
        <template v-for="(i,index) in date">
            <my-led :value="i"></my-led>
            <span class="circle" v-if="index==3 || index == 5"></span>

        </template>
    </div>
    <script src="js/led.js"></script>
    <script>
        Vue.createApp({
            components: {
                'my-led': Led
            },
            data() {
        return {
            date:[0,0,0,0,0,0,0,0],  //年月日
            time:[0,0,0,0,0,0]//时分秒
        }
    },
    created(){  //定时器
        setInterval(this.getTime,1000)
    },
    methods:{
        getTime(){ //获取当前时间
           var now=new Date();
           let s=now.getSeconds();
           this.time[4]=parseInt(s/10);
           this.time[5]=parseInt(s%10);
           let m=now.getMinutes();
           this.time[2]=parseInt(m/10);
           this.time[3]=parseInt(m%10);
           let h=now.getHours();
           this.time[0]=parseInt(h/10);
           this.time[1]=parseInt(h%10);
           
           const year = now.getFullYear();
                    this.date[0] = Math.floor(year / 1000); // 年的千位
                    this.date[1] = Math.floor((year % 1000) / 100); // 年的百位
                    this.date[2] = Math.floor((year % 100) / 10); // 年的十位
                    this.date[3] = year % 10; // 年的个位

            const month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
                    this.date[4] = Math.floor(month / 10); // 月的十位
                    this.date[5] = month % 10; // 月的个位

            const day = now.getDate();
                    this.date[6] = Math.floor(day / 10); // 日的十位
                    this.date[7] = day % 10; // 日的个位
        }
    }
        }).mount('#app')
    </script>
</body>
</html>